let box = document.querySelector(".box");
let imgBoxUl = box.querySelector(".img_box > ul");
let dot_box = document.querySelector(".dot_box");
let timer;

ajax(
  "POST",
  "http://studentback.dfbuff.xyz/postMethod",
  function (res) {
    console.log(res.result);
    res.result.forEach(function (item, index) {
      //渲染图片
      // let li = document.createElement("li");
      // li.innerHTML = `<a href=""><img src="${item.content}" alt="" /></a>`;
      // imgBoxUl.appendChild(li);
      imgBoxUl.innerHTML += `<li><a href=""><img src=${item.content} alt=""></a></li>`;

      //渲染指示器
      // if (index == 0) {
      //   dot_box.innerHTML += `<span class="dot dotActive}" data-index="${++index}"></span>`;
      // } else {
      //   dot_box.innerHTML += `<span class="dot" data-index="${++index}"></span>`;
      // }
      dot_box.innerHTML += `
      <span class="dot ${index == 0 ? "dotActive" : ""}" data-index="${++index}"></span>
      `;
    });

    // 动态生成图片(第一张和最后一张)
    // console.log(imgBoxUl.firstElementChild.cloneNode(true));
    // console.log(imgBoxUl.lastElementChild.cloneNode(true));
    // 插入克隆的第一张图片到最后一张图片之后的位置
    imgBoxUl.appendChild(imgBoxUl.firstElementChild.cloneNode(true));
    // 插入克隆的第四张图片到第一张之前的位置
    imgBoxUl.insertBefore(
      imgBoxUl.children[imgBoxUl.children.length - 2].cloneNode(true),
      imgBoxUl.firstElementChild
    );
    // 初始化下标
    let index = 1;
    // 获取上一个操作的index
    let lastIndex = 1;
    // 移动到原来第一张图片的位置
    imgBoxUl.style.transform = `translateX(-${index}00%)`;
    setTimeout(function () {
      imgBoxUl.style.transition = "0.2s ease-in-out";
    }, 300);
    let flag = true; // 设置开关, 默认可以打开

    // 事件代理
    box.addEventListener("click", function (event) {
      // 左箭头
      event.target.className == "arrow_left" && arrowLeftFn(event.target);
      // 右箭头
      event.target.className == "arrow_right" &&
        arrowRightFn(event.target);
      // 小圆点
      event.target.classList.contains("dot") && dotFn(event.target);
    });

    // 点击右箭头事件
    function arrowRightFn(target) {
      if (flag) {
        flagFn();
        imgBoxUl.style.transform = `translateX(-${++index}00%)`;
        // 判断是否到达最后一张
        limit(imgBoxUl.children.length - 1, 1);
        // 获取具体span标签
        let rBtnEvent =
          target.parentElement.nextElementSibling.children[index - 1];
        dotColor(rBtnEvent);
      }
    }

    // 点击左箭头事件
    function arrowLeftFn(target) {
      if (flag) {
        flagFn();
        imgBoxUl.style.transform = `translateX(-${--index}00%)`;
        // 判断是否是第一张
        limit(0, imgBoxUl.children.length - 2);
        // 获取具体span标签
        let lBtnEvent =
          target.parentElement.nextElementSibling.children[index - 1];
        dotColor(lBtnEvent);
      }
    }

    // 临界点跳转图片
    function limit(limitIndex, setIndex) {
      // limitIndex 设置限制下标
      // setIndex   设置对于下标
      if (index == limitIndex) {
        index = setIndex;
        imgBoxUl.addEventListener("transitionend", function () {
          // 清除过渡效果, 并且ul恢复位置
          imgBoxUl.style.transition = "none";
          imgBoxUl.style.transform = `translateX(-${index}00%)`;

          // 恢复过渡效果
          // 获取最终样式(被计算的样式)
          window
            .getComputedStyle(imgBoxUl, "style")
            .getPropertyValue("transition-duration");
          imgBoxUl.style.transition = "0.2s ease-in-out";
        });
      }
    }

    // 小圆点点击事件
    function dotFn(target) {
      // 获取自定义属性的值，这个值可以和index对应
      let dataIndex = target.getAttribute("data-index");
      // 操作的值重新赋值到index，那么index就可以更新
      index = dataIndex;
      imgBoxUl.style.transform = `translateX(-${index}00%)`;
      // 调用小圆点颜色函数
      dotColor(target);
    }

    // 封装小圆点颜色变化函数
    function dotColor(tag) {
      // console.log(tag);
      tag.parentElement.children[lastIndex - 1].classList.remove(
        "dotActive"
      );
      tag.classList.add("dotActive");
      // 重新赋值给lastIndex，目的是为了拿到上一次的操作值index
      lastIndex = index;
    }

    // 控制开关
    function flagFn() {
      // 关闭开关
      flag = false;
      imgBoxUl.addEventListener("transitionend", function () {
        flag = true;
      });
    }

    // 自动轮播
    timeFn();
    function timeFn() {
      if (timer) {
        clearInterval(timer);
      }
      timer = setInterval(function () {
        arrowRightFn(box.firstElementChild.lastElementChild);
      }, 1000);
    }

    // 鼠标移入box区域，停止定时器
    box.addEventListener("mouseenter", function () {
      clearInterval(timer);
    });
    // 鼠标移出box区域，开始定时器
    box.addEventListener("mouseleave", function () {
      setTimeout(timeFn, 1000);
    });

    // 检测页面是否切换，切换就停止定时器
    window.addEventListener("visibilitychange", function () {
      if (document.hidden) {
        clearInterval(timer);
      } else {
        timeFn();
      }
    });
  },
  {
    type: "图片",
  }
);